<template>
  <div class="person">
    <h1 ref="title1">尚硅谷</h1>
    <h2 ref="title2">前端</h2>
    <h3 ref="title3">Vue</h3>
    <button @click="showLog1">点我打印title1内容</button>
    <button @click="showLog2">点我打印title2内容</button>
    <button @click="showLog3">点我打印title3内容</button>
  </div>
</template>

<script lang="ts">
export default {
  name: 'Person',
}

/*

ref 可以标记在普通的html ，也可以标记在 组件身上

通过 定义 变量名=ref() 来进行标记 

ref="ren"  标记组件


let  ren = ref()
*/ 
</script>

<script lang="ts" setup>
import { ref, reactive, watchEffect, watch,defineExpose } from 'vue'
// 数据

let title2 = ref()
let title1 = ref()
let title3 = ref()

let name = ref('张三')
let age = ref(18)


// 方法
function showLog1() {
  console.log(title1.value)

}
function showLog2() {
  console.log(title2.value)

} function showLog3() {
  console.log(title3.value)

}
  //  子组件暴露给父组件的数据 要通过 defineExpose 来定义
  // 使用defineExpose将组件中的数据导出交给外部
  defineExpose({name,age})


</script>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  padding: 10px;
  margin: 0 5px;
}

li {
  font-size: 20px;
}
</style>